<template>
	<div class="custom-select">
			<custom-select
				v-model="selectValue"
				basicUrl="qmsChkGrade"
				style="width:300px"
          		basicKey="qmsChkGrade"
          		:defaultValue="getValue"
          		@before-load="beforeLoad"
         	    @onload-success="onLoadSuccess"
          		@on-error="onError"
				@on-change="customselect"
				@on-query-change="customChange"
				label-in-value >
			</custom-select>

			<h3 style="margin-top: 10px">JavaScript代码</h3>
        <pre>
            <code class="javascript">
		     export default {
			data() {
				return {
			         getValue:'',
			         sc:'',//选中事件
			         qc:'',//查询事件
			         bl:'',//加载前
			         oe:'',//加载失败
			         os:'',//加载成功
			        }
			},
				methods: {
						//选中事件
			          customselect: function(val){
			            var that = this;
			            that.sc = "value:" + val.value + " label:" + val.label;
			          },
			          //框内输入值
			          customChange: function(query){
			            var that = this;
			            that.qc = query;
			          },

			          // 加载成功回调函数
			          onLoadSuccess: function(data){
			            var that = this;
			            that.os = data.toString();
			          },
			          // 加载失败，返回错误信息
			          onError: function(v){
			            var that = this;
			            that.oe = v;
			          },
			          // 加载前回调函数
			          beforeLoad: function(){
			            var that = this;
			            that.bl = '加载前干的事';
			          },
				},
			}
            </code>
        </pre>

        <h3>HTML代码</h3>
            <!-- 显示HTML代码 -->
        <pre>
            <code class="html" v-text="htmlCode">
            </code>
        </pre>

         <div class="api">
            <div class="anchor">
                <!---->
                <h2 id="API">API</h2>
                <!---->
                <!---->
                <!---->
                <!---->
            </div>
            <div class="anchor">
                <!---->
                <!---->
                <h3 id="Select_props">  props</h3>
                <!---->
                <!---->
                <!---->
            </div>
            <table>
                <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
                </thead>
                <tbody>
                	<tr>
                    <td>basicKey</td>
                    <td>组件自定义的keu值</td>
                    <td>String</td>
                </tr>
                <tr>
                    <td>basicUrl</td>
                    <td>组件自定义的请求地址，如果不输入，则按照组件默认的地址请求数据</td>
                    <td>String</td>
                </tr>
                <tr>
                    <td>defaultValue</td>
                    <td>组件的默认值</td>
                    <td>String</td>
                    <td>无默认值</td>
                </tr>

                </tbody>
            </table>
            <div class="anchor">
                <!---->
                <!---->
                <h3 id="Select_events"> events</h3>
                <!---->
                <!---->
                <!---->
            </div>
            <table>
                <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>on-query-change</td>
                    <td>搜索词改变时触发的事件</td>
                    <td>搜索词</td>
                </tr>
                <tr>
                    <td>onload-success</td>
                    <td>加载数据成功时触发的事件</td>
                    <td>返回请求到的数据</td>
                </tr>
                <tr>
                    <td>on-error</td>
                    <td>请求数据失败的时候触发的事件</td>
                    <td>返回失败信息</td>
                </tr>
                <tr>
                    <td>before-load</td>
                    <td>请求数据之前触发的事件</td>
                    <td>无返回值</td>
                </tr>
                <tr>
                    <td>on-change</td>
                    <td>当选中时返回值</td>
                    <td>value</td>
                     <td>如需返回label 请加属性label-in-value</td>
                </tr>
                </tbody>
            </table>
            <div class="anchor">
                <!---->
                <!---->
                <h3 id="Select_methods"> methods</h3>
                <!---->
                <!---->
                <!---->
            </div>
            <table>
                <thead>
                <tr>
                    <th>方法名</th>
                    <th>说明</th>
                    <th>参数</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>暂无</td>
                    <td>-</td>
                    <td>-</td>
                </tr>
                </tbody>
            </table>
        </div>
	</div>
</template>

<script>
	import hljs from 'highlight.js'
	export default {
		data() {
			return {
                selectedTreeId1:'',
				 getValue:'',
		         sc:'',//选中事件
		         qc:'',//查询事件
		         bl:'',//加载前
		         oe:'',//加载失败
		         os:'',//加载成功
		         selectValue:'',//v-model值
         htmlCode:'<custom-select \n'
					+'v-model="selectValue" v-model值 \n'
					+'basicUrl="" 传入使用url 默认staffs\n'
//        			+'basicKey="" 传入key值\n'
          			+':defaultValue="getValue" 默认初始值\n'
          			+'@before-load="beforeLoad"\n'
         	    	+'@onload-success="onLoadSuccess"\n'
          			+'@on-error="onError"\n'
					+'style="width:300px" \n'
					+'@on-change="customselect"\n '
					+'@on-query-change="customChange" \n'
					+'label-in-value \n'
					+'filterable>\n'
					+'</custom-select>\n',
			}
		},
		methods: {
		 //选中事件
          customselect: function(val){
            var that = this;
            that.sc = "value:" + val.value + " label:" + val.label;
          },
          //框内输入值
          customChange: function(query){
            var that = this;
            that.qc = query;
          },

          // 加载成功回调函数
          onLoadSuccess: function(data){
            var that = this;
            that.os = data.toString();
          },
          // 加载失败，返回错误信息
          onError: function(v){
            var that = this;
            that.oe = v;
          },
          // 加载前回调函数
          beforeLoad: function(){
            var that = this;
            that.bl = '加载前干的事';
          },
		},
		mounted: function() {
			window.setTimeout(function () {
                $('.custom-select pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 100);
		},
		watch: {},
		components: {},

	}
</script>

<style lang="scss">
	.custom-select {
		.ivu-select-selection:hover {
			border-color: #3EA9F5;
		}
		 margin: 40px;

        label {
          vertical-align: top;
          display: inline-block;
          width: 80px;
        }

        .marginT20 {
          margin-top: 20px;
        }

        table {
            font-family: Consolas,Menlo,Courier,monospace;
            font-size: 12px;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #e9e9e9;
            width: 100%;
            margin-bottom: 24px;
        }

        table td, table th {
            border: 1px solid #e9e9e9;
            padding: 8px 16px;
            text-align: left;
        }

        table th {
            background: #f7f7f7;
            white-space: nowrap;
            color: #5c6b77;
            font-weight: 600;
        }
	}
</style>
